<template>
  <base-page-view class-name="page-container">
    <view class="head-box">
      <view class="top-box">
        <view class="price">{{detail.user_integral}}</view>
        <view class="title">可用积分</view>
      </view>
      <view class="tab-box">
        <view class="tab" :class="selectTab==item.code?'select':''"
        v-for="(item,index) in detail.show_type_list" :key="index"
        @click="tabChange(item)"
        >{{item.name}}</view>
      </view>
    </view>
    <view class="zw-box"></view>
		<view class="detail-content">
      <view class="detail-box" v-for="(item,index) in listData" :key="index">
        <view class="title title1">
          <view class="name">{{item.integral_desc}}</view>
          <view class="price" :class="item.integral>0?'red':'green'">{{item.integral>0?'+':''}}{{item.integral}}</view>
        </view>
        <view class="title title2">
          <view class="time">{{item.created_at|formatTimes}}</view>
          <view class="price">余额：{{item.balance_integral|formatMoney}}</view>
        </view>
      </view>
      <no-more :list="listData" :nomore="nomore" class="no-more"></no-more>
    </view>
  </base-page-view>
</template>

<script>
	export default {
		data() {
			return {
        detail:{},
        selectTab:'',
				pageSize: 10,
				pageNo: 1,
				listData: [],
				nomore: false,
			}
		},
    onLoad(option) {
      this.getData()
    },
    onPullDownRefresh() {
      this.pageNo = 1
      this.listData = []
      this.nomore = false
      this.getData();
    },
    onReachBottom() {
      if (this.nomore) return
      this.pageNo += 1
      this.getList()
    },
		methods: {
      async getData(){
        this.getDetail();
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
      },
      tabChange(item){
        this.selectTab=item.code;
        this.pageNo = 1;
        this.listData = [];
        this.nomore = false;
        this.getList();
      },
      async getDetail(){
        const res = await this.$api.gainApi.box_integral_detail();
        if (res.code == 0) {
          this.detail=res.data;
          if(this.detail.show_type_list&&this.detail.show_type_list.length>0){
            if(this.selectTab===''){
              this.selectTab=this.detail.show_type_list[0].code;
            }
            this.getList();
          }
        }
      },
			async getList() {
			  const res = await this.$api.gainApi.box_detail_list({
			    page_size: this.pageSize,
			    page_no: this.pageNo,
          show_type:this.selectTab,
			  })
			  if (res.code == 0) {
			    this.listData = this.listData.concat(res.data.integral_record)
			    if (res.data.integral_record.length < this.pageSize) {
			      this.nomore = true
			    }
			  }
			},
      goDetail(item){
        this.$navigateTo(`/pagesEarnings/retail/detail?queryType=SENT&dailyDate=${item.sendTime}`);
      }
		}
	}
</script>

<style lang="scss" scoped>
.head-box{
  position: fixed;
  width: 100%;
  top: 0rpx;
  background-color: #f5f5f5;
  padding-bottom: 15rpx;
}
.top-box{
  height: 330rpx;
  background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/member/earnings/box-back.png') no-repeat;
  background-size: 100% auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .price{
    font-size: 80rpx;
    color: white;
  }
  .title{
    font-size: 28rpx;
    color: #999999;
    margin-top: 18rpx;
  }
}
.tab-box{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 88rpx;
  background-color: white;
  .tab{
    display: inline-block;
    padding: 12rpx 0rpx;
    &.select{
      border-bottom: 4rpx solid #000000;
    }
  }
}
.zw-box{
  height: 412rpx;
}
.no-more{
  ::v-deep{
    .empty_view{
      top:60%;
    }
  }
}
.detail-content{
  margin-top: 20rpx;
  background-color: white;
  .detail-box{
    margin: 0rpx 32rpx;
    padding: 32rpx 0rpx;
    border-bottom: 2rpx solid #EEEEEE;
    .title{
      display: flex;
      justify-content: space-between;
      line-height: 40rpx;
    }
    .title1{
      margin-bottom: 12rpx;
    }
    .time{
      color: #999999;
    }
    .red{
      color: #FF2222;
    }
    .green{
      color: #00AD13;
    }
  }
}
</style>
